import '@css/adminPage.css'

import { sellersListApi } from '@utils/api/sellersManage'
import { searchSellersApi } from '@utils/api/sellersManage'
import { delSellerNameApi } from '@utils/api/sellersManage'
document.querySelector('#sellersList').addEventListener('click', () => {
    location = `sellersManage.html`
})
document.querySelector('#addSellers').addEventListener('click', () => {
    location = `addSellersManage.html`
})


window.addEventListener("DOMContentLoaded", async () => {

    document.querySelectorAll(".api-box").forEach(item => {

        item.style.display = "none"

    })

    //a标签切换预留区，此区域的switch内置标签切换,只需要将你的列表div放入right-List中，并设置一个id,设置class为api-box，并给对应按钮一个id
    document.querySelectorAll("a").forEach(item => {
        item.addEventListener("click", (e) => {
            e.preventDefault()
            switch (e.target.getAttribute("data-id")) {
                //按钮的id
                case "userListBtn":

                    document.querySelectorAll(".api-box").forEach(item => {
                        item.style.display = "none"
                    })
                    // 你的列表的id
                    document.getElementById("userListBtn").style.display = "block"
                    break;
            }
        })
    })

})

document.querySelectorAll("h3").forEach(item => {
    item.addEventListener("click", async () => {
        if (item.style.backgroundColor != "gray") {
            item.style.backgroundColor = "gray"
            item.style.color = "white"
        } else {
            item.style.backgroundColor = "#485069"
            item.style.color = "rgb(175, 175, 175)"

        }
    })
})

window.addEventListener('DOMContentLoaded', async () => {
    const { code, rows } = await sellersListApi()
    console.log(rows);

    renderSellersList(rows)

    document.querySelector('tbody').addEventListener('click', e => {
        if (e.target.className == "modifySellersBtn") {
            let id = e.target.getAttribute('dataSellersid')
            location = `modifySellersManage.html?tid=${id}`
        }
    })


    document.querySelector('#searchSellerss').addEventListener('click', async e => {
        const sellersName = e.target.parentElement.firstElementChild.nextElementSibling.value;
        console.log(sellersName);
        const { code, message, data } = await searchSellersApi(sellersName)
        renderSellersList(data)
    })
    document.querySelector('#rightList').addEventListener('click', async e => {
        if (e.target.className == 'delSellersBtn') {
            const sid = e.target.getAttribute('dataSellerid')
            const result = await delSellerNameApi(sid)
            console.log(result);
            if (result) {
                alert('删除成功')
                const { code, rows } = await sellersListApi()
                renderSellersList(rows)
            }
        }
    })


})

const renderSellersList = rows => {
    document.querySelector('tbody').innerHTML = rows.map(item => `<tr>
          <td>${item.sid}</td>
          <td>${item.sellersName}</td>
          <td>${item.sellersAccount}</td>
          <td>${item.sellersPassword}</td>
          <td> <a href="#" id ='seeList'>查看列表</a></td>
          <td>
          <button class="delSellersBtn" dataSellerid=${item.sid} >删除</button>
          <button class="modifySellersBtn" dataSellersid=${item.sid} id="modifySellersBtn">修改</button>
          </td>
          </tr>
       `).join(" ")
}

// 渲染列表


// 增加功能




